<template>
  <div id="app">
    <el-container>
      <Header></Header>
      <el-main>
        <div class="show" height="400px">
          <el-row>
            <el-col :span="12"
              ><div>
                <img
                  src="../../static/p1.jpg"
                  height="400px"
                  width="auto"
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="info">
                <p style="font-size: 30px; font-weight: bolder; color: #888">
                  #{{
              this.$route.params.pid
            }} {{
              this.$route.params.pname
            }}
                </p>
                <div>
                  <el-tag type="info">油画</el-tag>
                  <el-tag type="info">抽象派</el-tag>
                </div>
                <p style="font-size: 40px; font-weight: bolder">8800元</p>
                <p style="font-size: 16px; font-weight: 400">链上数据：5555555555555555555</p>
                <el-button round type="goon"  @click="open()" id="buy">立即购买</el-button>
              </div></el-col
            >
          </el-row>
        </div>

        <div class="author">
          <h2>作者信息</h2>
          <div style="border: 1px solid #eee"></div>
          <p>
            塞西莉·布朗（Cecily
            Brown）于1969年出生于伦敦，曾就读于伦敦的斯莱德美术学院，并于1993年获得美术学士学位前曾在纽约工作室学校作为交换生。一年后，她搬到纽约，与自己疏远来自以新媒体为导向的年轻英国艺术家主导的伦敦艺术界。在分析立体主义和抽象表现主义以及学术绘画的影响下，布朗探索了油画颜料的材料和感官可能性。
          </p>
        </div>
        <div class="product">
          <h2>作品信息</h2>
          <div style="border: 1px solid #eee"></div>
          <p>
            
            作品以灵动丰富的色彩表现力，彰显了夏日庭院中一尾鲜艳的红色鲤鱼在池塘中畅游的情景，抽象的色块运用，更突出表现了活泼欢快的气氛。指尖的笔触盛开,在视野中凝固,终于定格。
          </p>
        </div>

        <div class="price">
          <h2>历史价格</h2>
          <div style="border: 1px solid #eee"></div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="version" label="版本"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="master" label="拥有者"> </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "Details",
  components: {
    Header,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          version: "v1.0",
          price: "9800",
          master: "Gemstone",
        },
        {
          date: "2018-03-12",
          version: "v1.1",
          price: "6800",
          master: "倪京京",
        },
      ],
    };
  },
  methods: {
      open() {
        this.$confirm('确认购买该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '购买成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          });          
        });
      },
      /*aaa: function(){
        document.getElementById("buy").innerHTML="已购买";
      }
      */
    }
};
</script>

<style scoped>
.el-container {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}
.show {
  vertical-align: middle;
  text-align: center;
}
.info{
    margin-left: 10%;
    float: left;
}
.author,
.product,
.price {
  margin: 10px 30px 60px 30px;
}

.el-button--goon {
  color: rgb(255, 255, 255);
  background-color: #131313;
  border-color: #131313;
  height: 60px;
  line-height: 30px;
  text-align: center;
}
.el-button--goon:focus,
.el-button--goon:hover {
  color: rgb(0, 0, 0);
  background-color: #ffffff;
  border-color: #000000;
  height: 60px;
  line-height: 30px;


}
.el-button--goon:active {
 color: rgb(0, 0, 0);
  background-color: #ffffff;
  
  border-color: #000000;
  height: 60px;
  line-height: 30px;
}
</style>